<template>
    <div id='past_records'>
        <div class="past_records_back">
            <img class="past_records_back_img" :src="url.history_back" alt="图片" />
        </div>
        <div class="past_records_box">
            <van-icon name="arrow-left" @click="i_but('left')" class="arrow_left" />
            <van-icon name="arrow" @click="i_but('right')" class="arrow_right" />
            <van-calendar class="past_records_calendar" :show-confirm="true" @confirm="onConfirm" type="multiple"
                :default-date="null" :poppable="false" :min-date="minDate" :max-date="maxDate" :formatter="formatter"
                color="#d58913" confirm-text="补填" confirm-disabled-text="补填" :show-subtitle="false" :show-title="true"
                :title="title" />
        </div>
    </div>
</template>

<script>

import {
    selectDlRiskCheckByCard,
} from '@/api/school'
export default {
    name: 'pastRecords',
    data() {
        return {
            url: {
                history_back: require('@/assets/images/school/history_back.jpg'),
            },
            title: "",
            minDate: new Date(2022, 0, 1),
            maxDate: new Date(2022, 0, 31),
            number: 0,
            dateList: [],
            list: [],
            user: {}
        };
    },
    components: {},
    created() {
        this.create();
    },
    mounted() { },
    // 计算属性
    computed: {},
    // 监听属性
    watch: {},
    // Vue方法定义
    methods: {
        i_but(type) {
            if (type === "left") {
                this.number = this.number - 1;
            } else {
                this.number = this.number + 1;
            }
            const date = new Date(new Date().setMonth((new Date().getMonth() + this.number)));
            const year = date.getFullYear().toString().padStart(2, "0");
            const month = date.getMonth().toString().padStart(2, "0");
            this.create(year, month)
        },
        async create(_year, _month) {
            let year, month;
            if (_year && _month) {
                year = _year;
                month = _month;
            } else {
                // 获取当前年、月
                let new_date = new Date()
                year = new_date.getFullYear().toString().padStart(2, "0");
                month = new_date.getMonth().toString().padStart(2, "0");
            }
            this.title = year + "年" + (Number(month) + 1).toString().padStart(2, "0") + "月";
            this.minDate = new Date(year, month, new Date(year, month, 1).getDate());
            this.maxDate = new Date(year, month, new Date(year, month, 0).getDate());
            await selectDlRiskCheckByCard({ card_no: this.$route.query.card_no, startTime: year + "-" + (Number(month) + 1).toString().padStart(2, "0") + "-" + new Date(year, month, 1).getDate().toString().padStart(2, "0"), endTime: year + "-" + (Number(month) + 1).toString().padStart(2, "0") + "-" + new Date(year, month, 0).getDate().toString().padStart(2, "0") }).then((res) => {
                if (res.data.errcode === 0) {
                    this.list = res.data.data
                } else {
                    this.$toast(res.data.errmsg)
                }
            })
        },
        onConfirm(dates) {
            let lest = []
            dates.map((item) => {
                let year = item.getFullYear().toString().padStart(2, "0");
                let month = (item.getMonth() + 1).toString().padStart(2, "0");
                let date = item.getDate().toString().padStart(2, "0");
                lest.push({ date: year + "-" + month + "-" + date })
            })
            this.$router.push({
                path: '/school/healthStudent',
                query: {
                    type: 'children',
                    ...this.$route.query,
                    dateList: JSON.stringify(lest)
                },
            })
        },
        formatter(date) {
            if (date.date.getTime() < new Date().getTime()) {
                this.list.forEach((item, index) => {
                    if (date.date.getTime() === new Date(item.date.split("-").join(",")).getTime()) {
                        date.type = 'disabled';
                        date.bottomInfo = '已填';
                        date.className = 'bottom_over';
                    }
                })
                if (!date.bottomInfo) {
                    date.bottomInfo = '可填';
                    date.className = 'bottom_txt';
                }
            } else {
                date.type = 'disabled';
                date.className = "show_txt"
            }
            return date;
        }
    },
};
</script>

<style scoped lang="less">
#past_records {
    width: 100%;
    height: 100%;

    .past_records_back {
        width: 100%;
        margin: 0;
        padding: 0;

        .past_records_back_img {
            width: 100%;
            margin: 0;
            padding: 0;
        }
    }

    .past_records_box {
        position: relative;
        width: 100%;
        height: 500px;

        .arrow_left,
        .arrow_right {
            position: absolute;
            top: 0;
            z-index: 10;
            font-size: 24px;

            &:before {
                width: 44px;
                height: 44px;
                text-align: center;
                line-height: 44px;
            }
        }

        .arrow_left {
            left: 20%;
        }

        .arrow_right {
            right: 20%;
        }

        .past_records_calendar {
            height: 520px;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;

            /deep/ .van-calendar__header {
                .van-calendar__header-title {
                    font-size: 20px;
                    height: 44px;
                }

                .van-calendar__weekdays {
                    .van-calendar__weekday {
                        font-size: 18px;
                    }
                }
            }

            /deep/.van-calendar__month {
                .van-calendar__days {
                    .van-calendar__day {
                        font-size: 18px;

                        .van-calendar__bottom-info {
                            font-size: 16px;
                            color: #c8c9cc;
                        }
                    }

                    .van-calendar__day--multiple-selected,
                    .van-calendar__day--start,
                    .van-calendar__day--end,
                    .van-calendar__day--multiple-middle {
                        .van-calendar__bottom-info {
                            color: #ffffff !important;
                        }
                    }

                    .bottom_txt {
                        .van-calendar__bottom-info {
                            color: #ee0a24;
                        }
                    }

                    .bottom_over {
                        .van-calendar__bottom-info {
                            color: rgb(70, 163, 70);
                        }
                    }

                    .show_txt {
                        color: #2c3e50;

                        .van-calendar__bottom-info {
                            color: #2c3e50;
                        }
                    }
                }

                .van-calendar__month-title {
                    display: none;
                }
            }
        }

    }
}
</style>
